<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>七夕快乐</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#shu{
				font-family: "微软雅黑";
				line-height: 500px;
				font-size: 72px;
				text-align: center;
				
			}
			#dian{
				width: 300px;
				height: 200px;
				font-size: 60px;
			}
		</style>
	</head>
	<body>
		<button id="dian">不要点我</button>
		<button id="start">猜猜看吧</button>
		<p id="shu">时间</p>
		<script type="text/javascript">
			window.onload = function(){
				var Ostart = document.getElementById("start");
				var Oshu = document.getElementById("shu");
				var i = 10;
				var timer = null;
				var Odian = document.getElementById("dian");
				Odian.onclick = function(){
					alert("你个憨批！都说了不要点！");
				}
				Ostart.onclick = function(){
					timer = setInterval(function(){
						i--;
						if(i==0){
							i = "七夕快乐";
							clearInterval(timer);
							Oshu.style.backgroundImage = "url(img/bg.gif)";
						}
						Oshu.innerHTML = i;
					},100);
				}
			}
		</script>
	</body>
</html>
